<template>
  <el-card class="box-card">
    <div class="icon-container" @click="flip">
      <el-icon color="rgba(255, 255, 255, 0.7)">
        <Refresh />
      </el-icon>
    </div>
    <el-row>
      <el-col :span="15">
        <div id="market-style-chart" class="chart" />
      </el-col>
      <el-col :span="9" class="market-stat">
        <el-row style="font-weight: bold;padding-bottom: 5px;font-size: 18px;">市场统计：</el-row>
        <el-row>
          <div>涨：</div>
          <div :style="{color: getColor(1),'font-weight': 'bold'}">{{marketStat[1]+' 家'}}</div>
        </el-row>
        <el-row>
          <div>跌：</div>
          <div :style="{color: getColor(-1),'font-weight': 'bold'}">{{marketStat[2]+' 家'}}</div>
        </el-row>
        <el-row>
          <div>平：</div>
          <div style="font-weight: bold;">{{marketStat[3]+' 家'}}</div>
        </el-row>
        <el-row>
          <div>沪股通：</div>
          <div :style="{color: getColor(marketStat[4]),'font-weight': 'bold'}">{{marketStat[4]+' 亿'}}</div>
        </el-row>
        <el-row>
          <div>深股通：</div>
          <div :style="{color: getColor(marketStat[5]),'font-weight': 'bold'}">{{marketStat[5]+' 亿'}}</div>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="index-container" justify="center">
      <el-col :span="8" v-for="index in marketIndices" v-bind:key="index.f12">
        <div style="font-weight: bold;">{{index.f14}}</div>
        <div :style="{color: getColor(index.f4),'font-weight': 'bold','font-size': '22px'}">{{(index.f2/100).toFixed(2)}}</div>
        <el-row>
          <el-col :span="12" :style="{color: getColor(index.f4)}">{{(index.f4/100).toFixed(2)}}</el-col>
          <el-col :span="12" :style="{color: getColor(index.f4)}">{{(index.f3/100).toFixed(2)+'%'}}</el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row>
      <el-tabs :stretch="true">
        <el-tab-pane v-for="name in names" v-bind:key="name" :label="name">
          <el-row class="perf-container" justify="center">
            <el-col :span="8" v-for="index in marketPerf[name]" v-bind:key="index.f12" style="padding: 2px 0;">
              <div>{{index.f14}}</div>
              <div :style="{color: getColor(index.f3),'font-weight': 'bold','font-size': '22px'}">{{(index.f3).toFixed(2)+'%'}}</div>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-row>
    <el-row style="margin-top: 10px;">
      <div>{{'更新时间：'+updateTime}}</div>
    </el-row>
  </el-card>
</template>

<script>
import * as echarts from 'echarts'
import axios from 'axios'
import moment from 'moment'
import {
  Refresh
} from '@element-plus/icons-vue'

export default {
  name: "StockFront",
  components: {
    Refresh
  },
  data() {
    return {
      chart: null,
      marketStat: [],
      marketIndices: [],
      names: ['行业', '概念'],
      marketPerf: {},
      updateTime: ''
    }
  },
  mounted() {
    this.initChart()
    this.getMarketStyleAnalysis()
    setInterval(() => {
      const now = new moment()
      const time = parseInt(now.format('HHmm'))
      const week = now.format('dddd')
      if (time >= 910 && time <= 1800 && week !== 'Saturday' && week !== 'Sunday') {
        this.getMarketStyleAnalysis()
      }
    }, 1000 * 60)
  },
  methods: {
    flip() {
      this.$emit('flip')
    },
    getColor(val) {
      if (val > 0)
        return '#fd8181'
      if (val < 0)
        return '#86d59a'
      return ''
    },
    get(url) {
      return new Promise((resolve, reject) => {
        axios.get(url).then(data => {
          resolve(data.data);
        }).catch(err =>{
          reject(err.data)
        })
      })
    },
    getMarketStyleAnalysis() {
      Promise.all([
        this.get('https://push2.eastmoney.com/api/qt/ulist.np/get?secids=1.000001,0.399001&fields=f104,f105,f106'),
        this.get('https://datacenter-web.eastmoney.com/api/data/get?type=RPT_MUTUAL_QUOTA&sty=TRADE_DATE%2CMUTUAL_TYPE' +
            '%2CBOARD_TYPE%2CMUTUAL_TYPE_NAME%2CFUNDS_DIRECTION%2CINDEX_CODE%2CINDEX_NAME%2CBOARD_CODE&extraCols=status~07~BOARD_CODE' +
            '%2CdayNetAmtIn~07~BOARD_CODE%2CdayAmtRemain~07~BOARD_CODE%2CdayAmtThreshold~07~BOARD_CODE%2Cf104~07~BOARD_CODE%2Cf105~07~BOARD_CODE' +
            '%2Cf106~07~BOARD_CODE%2Cf3~03~INDEX_CODE~INDEX_f3%2CnetBuyAmt~07~BOARD_CODE&p=1&ps=200&sr=1&st=MUTUAL_TYPE&source=WEB&client=WEB&_t=' + new moment().unix()),
        this.get('http://quote.eastmoney.com/zixuan/api/zhuti/fg'),
        this.get('https://push2.eastmoney.com/api/qt/ulist.np/get?secids=1.000001,0.399001,0.399006&fields=f2,f3,f4,f12,f14'),
        this.get('https://40.push2.eastmoney.com/api/qt/clist/get?pn=1&pz=6&po=1&np=1&fltt=2&invt=2&fid=f3&fs=m:90+t:2+f:!50&fields=f3,f12,f14'),
        this.get('https://40.push2.eastmoney.com/api/qt/clist/get?pn=1&pz=10&po=1&np=1&fltt=2&invt=2&fid=f3&fs=m:90+t:3+f:!50&fields=f3,f12,f14')
      ]).then(([data1, data2, data3, data4, data5, data6]) => {
        // 市场统计
        const marketStat = []
        marketStat[0] = data3.result[0].TopText.PositionInd
        marketStat[1] = data1.data.diff.map(i => i.f104).reduce((p, c) => p + c)
        marketStat[2] = data1.data.diff.map(i => i.f105).reduce((p, c) => p + c)
        marketStat[3] = data1.data.diff.map(i => i.f106).reduce((p, c) => p + c)
        marketStat[4] = (data2.result.data.filter(i => i.MUTUAL_TYPE === '001').map(i => i.netBuyAmt).reduce((p ,c) => p + c) / 10000).toFixed(2)
        marketStat[5] = (data2.result.data.filter(i => i.MUTUAL_TYPE === '003').map(i => i.netBuyAmt).reduce((p ,c) => p + c) / 10000).toFixed(2)
        this.marketStat = marketStat
        this.chart.setOption({
          series: {
            data: [{
                value: marketStat[0]
            }]
          }
        })
        // 市场指数
        this.marketIndices = data4.data.diff
        // 行业
        this.marketPerf['行业'] = data5.data.diff
        // 概念
        this.marketPerf['概念'] = data6.data.diff.filter(i => i.f14.indexOf('昨日') === -1).slice(0, 6)
        // 更新时间
        this.updateTime = new moment().format('YYYY-MM-DD HH:mm:ss')
      })
    },
    initChart() {
      this.chart = echarts.init(document.getElementById('market-style-chart'))
      const option = this.getOption()
      this.chart.setOption(option)
    },
    getOption() {
      const option = {
        series: [
          {
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 100,
            splitNumber: 2,
            axisLine: {
              lineStyle: {
                width: 15,
                color: [[1, new echarts.graphic.LinearGradient(
                    0, 0, 1, 0, [
                      {
                        offset: 0.1,
                        color: '#55cc43'
                      },{
                        offset: 0.5,
                        color: '#FF9900'
                      },{
                        offset: 1,
                        color: '#ff4400'
                      }
                    ]
                )]]
              }
            },
            pointer: {
              width: 4,
              itemStyle: {
                color: 'rgba(255, 255, 255, 0.8)'
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              length: 5,
              distance: 0,
              lineStyle: {
                width: 2,
                color: 'rgba(255, 255, 255, 0.6)'
              }
            },
            axisLabel: {
              distance: 20,
              color: 'rgba(255, 255, 255, 0.8)',
              fontSize: 16,
              fontFamily: 'HarmonyOS_Sans_SC'
            },
            title: {
              show: false
            },
            detail: {
              valueAnimation: true,
              fontSize: 30,
              fontWeight: 'bold',
              offsetCenter: [0, '40%'],
              color: 'rgba(255, 255, 255, 0.9)',
              fontFamily: 'HarmonyOS_Sans_SC',
              formatter: function (value) {
                return value + '%';
              },
            }
          }
        ]
      }
      return option
    }
  }
}
</script>

<style scoped>
.box-card {
  width: 400px;
  height: 426px;
  border: none;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
}
.icon-container {
  float: right;
  margin-top: 10px;
  margin-right: -10px;
  cursor: pointer;
}
.icon:hover {
  color: rgba(255, 255, 255, 0.3);
}
:deep(.el-card__body) {
  padding-top: 0px;
}
.chart {
  height: 200px;
}
.market-stat {
  height: 200px;
  padding-top: 20px;
}
.index-container {
  width: 100%;
  margin-top: -35px;
}
:deep(.el-tabs__item.is-active) {
  color: rgba(255, 255, 255, 0.9);
  font-weight: bold;
  font-siez: 16px;
}
:deep(.el-tabs__item:hover) {
  color: rgba(255, 255, 255, 0.9);
  font-weight: bold;
  font-siez: 16px;
}
:deep(.el-tabs__item) {
  color: rgba(255, 255, 255, 0.6);
  font-siez: 16px;
}
</style>